<!DOCTYPE >
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>KPOPGIRL</title>
<meta name="author" content="TACO" />
<meta name="keywords" content="kpop,kpopgirl,kpopstar" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<link rel="stylesheet" href="css/mobile.css" />
<script type="text/javascript" src="framework/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/page_event.js"></script>
<script type="text/javascript" src="js/spin.js"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link  href="http://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet" type="text/css" >
<style>
dl{
  font-family: 'PT Sans Narrow', sans-serif;
  font-style: normal;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.011em;
  word-spacing: 0em;
  font-weight:normal;
}
</style>
<style>
h1 {
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  word-spacing: 0em;
}
</style>
<script language="javascript">
<!--
	var page = 1;
	var total = 0;
	var json_url = "";
	var blist = true;
	var $list;
	//var id = Request('id');
	
	$(document).ready(function()
	{
		//json_url = "http://gdata.youtube.com/feeds/api/playlists/" + id + "?v=2&alt=jsonc&max-results=15";
		//More();
 	 });
 	 
 	 
	$(window).scroll(function()
	{
		// Android more
		if($(window).scrollTop() == $(document).height() - $(window).height())
		{
			if(page > 1 && page <= total)
			{
				if(blist)
				{
					$("#load").show();
					More();
				}
			}
		}	
	});
	
	function More()
	{
		var response = "";
		
		blist = false;
		$list = $("#list");

		$.getJSON(json_url + "&start-index=" + page, function(data)
		{
			total = parseInt(data.data.totalItems);
			
			if(page == 1)
				$("#title").html(data.data.title);
				
				
			if(page <= total)
			{
				$.each(data.data.items, function(i, item) 
				{
						
					response += '<li>';
					response += '<a href="http://www.youtube.com/watch?v=' + item.video.id + '">';
					response += '<div class="frame" style="background: url(' + item.video.thumbnail.hqDefault + ') center center no-repeat; "></div>';
					response += '</a>';
					response += '<dl>';
					response += '<dt>' + item.video.title + '</dt>';
					response += '<dd>';
					response += '<span>time ' + time(item.video.duration) + '</span>';
					response += '<span>view ' + formatCurrency(item.video.viewCount) + '</span>';
					response += '<span>like ' + formatCurrency(item.video.likeCount) + "</span>"; 
					response += '</dd>';
					response += '</dl>';
					response += '</li>';					
        		});
        	}
							
			if(response == "")
				$("#loading").hide();
			else
			{
				$(response).appendTo($list);
				blist = true;
			}
				
			$("#load").hide();	
			
			page += 15;
			
			if(page > total)
				$("#loading").hide();
		});
	}
	
	function Load(id)
	{
		json_url = "http://gdata.youtube.com/feeds/api/playlists/" + id + "?v=2&alt=jsonc&max-results=15";
		More();
	}
-->
</script>
</head>
<body id="sub">
	<div id="wrap">
		<header>
			<a href="index.html" class="home"></a>
			<h1 id="title"></h1>
		</header>
		<section class="list">
			<ul id="list">
			</ul>
			<div id="loading">
				<div id="load" style="display:none;"></div>
			</div>
		</section>
		<footer>
		</footer>
	</div>
</body>
</html>
<script>
	var opts = {
	  lines: 8, // The number of lines to draw
	  length: 4, // The length of each line
	  width: 3, // The line thickness
	  radius: 6, // The radius of the inner circle
	  color: '#fff', // #rgb or #rrggbb
	  speed: 1, // Rounds per second
	  trail: 54, // Afterglow percentage
	  shadow: false // Whether to render a shadow
	};
	var target = document.getElementById('load');
	var spinner = new Spinner(opts).spin(target);
</script>